<template>
  <div class="account-admin">
    <w-nav-bar
      title="账号修改"/>
    <!--图片上传-->
    <div class="image-up-box w-flex-center">
      <w-image-up
        ref="W_IMAGE_UP"
        :input-src="icon"/>
    </div>
    <group>
      <x-input
        title="用户名"
        :min="4"
        :max="20"
        placeholder="请输入用户名"
        :show-clear="false"
        @on-enter="onSubmit"
        v-model="name"/>
      <x-input
        title="密码 "
        :min="6"
        :max="20"
        placeholder="请输入密码"
        type="password"
        :show-clear="false"
        @on-enter=onSubmit
        v-model="pass"/>
    </group>
    <div class="w-max-btn w-btn-fixed-b">
      <x-button
        @click.native="onSubmit"
        type="primary">提交</x-button>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import WImageUp from '@/components/global/imageUp/oss'
  import { XInput, Group, XButton } from 'vux'
  export default {
    name: 'Set',
    components: {
      WImageUp,
      XInput,
      Group,
      XButton
    },
    data() {
      return {
        /**
         * 头像
         */
        icon: '',
        /**
         * 账号
         */
        name: '',
        /**
         * 密码
         */
        pass: ''
      }
    },
    computed: {
      ...mapGetters (['user'])
    },
    methods: {
      /**
       * 提交
       * @returns {Promise<void>}
       */
      async onSubmit() {
        try {
          this.icon = await this.$refs['W_IMAGE_UP'].upImage ()
          await this.$store.dispatch ('MODIFY_USER_DATA', {
            icon: this.icon,
            name: this.name,
            pass: this.pass
          })
          this.$store.dispatch ('LOG_OUT').then (() => {
            this.$w_popview.msgSuccess ('修改成功，请重新登录')
            this.$router.push ('/set/root')
          })
        } catch (e) {
          if (e && e.msg) {
            this.$w_popview.msgError (e.msg)
          }
        }
      }
    },
    mounted() {
      this.icon = this.user.icon
      this.name = this.user.name
    }
  }
</script>

<style lang="scss" scoped>
  .account-admin {
    > .image-up-box {
      padding: 10px 0;
    }
  }
</style>
